<template>
    <div class="main">

        <div class="main_main">
            <div class="main_up">
                <img :src="getUserImageFilePathQiNiuYun(userInformation.user_header)" v-if="userInformation.comploImg"
                    class="el_formx_img" @click="openupdateimg">
                <img :src="getStaticFilePathJAVA('noheaderimage.jpeg')" class="el_formx_img" v-else @click="openupdateimg">
                <!-- <div style="position: relative;width: 100%;height: 4vh;display: flex;justify-content: center;">
                    <el-button type="primary" plain>点击上传</el-button>
                </div> -->

            </div>
            <div class="main_down" v-if="userInformation.user_header">
                <Vuecropperdemo :imageUrl="getUserImageFilePathQiNiuYun(userInformation.user_header)"></Vuecropperdemo>
            </div>
        </div>


        <el-dialog title="上传图片" :visible.sync="dialogVisible" width="30%">
            <el-upload class="upload-demo" drag action="" multiple :on-change="fileonchange" :limit="1"
                :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</template>
  
<script>
import getStorage from '@/utils/getStorage'
import myInformationApi from '@/api/userzRequest.js'
import Vuecropperdemo from '../../component/vuecropperdemo.vue';
import { Base64 } from 'js-base64'
// let encPass=this.$Base64.encode(password);//加密
// let decPass=this.$Base64.decode(encPass);//解密
export default {
    // 组件名称
    name: 'updateBaseInfor',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { Vuecropperdemo },
    // 组件状态值
    data() {
        return {
            //用户信息
            userInformation: {
                user_id: null,
                user_name: null,
                user_password: null,
                user_phone: null,
                user_mail: null,
                status: null,
                user_header: null,
                creat_time: null,
                update_time: null,
                user_sex: null,
            },
            //上传图片
            dialogVisible: false,
            //表单的验证
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {

    },
    // 组件方法
    methods: {
        //通过id查询个人中心
        selectUserInformation() {
            let UserIDX = getStorage.getAxiosUserId();
            myInformationApi.selectByUser_idMyself(UserIDX).then(res => {
                this.userInformation = res.data;
            })
        },
        //上传头像
        openupdateimg() {
            this.dialogVisible = true;
        },
        //文件添加时的函数
        fileonchange(file, fileList) {
            let types = ['image/jpeg', 'image/png','image/jpg'];
            let fileDemo = file.raw
     
            const isImage = types.includes(fileDemo.type);
            const isLtSize = fileDemo.size / 1024 / 1024 < 3;
            if (!isImage) {

                this.$message.error('上传图片只能是 JPG、PNG 格式!');
                return false;
            }
            if (!isLtSize) {
                this.$message.error('上传图片大小不能超过 3MB!');
                return false;
            }
            return true;

            console.log(file);
        },
    },
    // 以下是生命周期钩子   注：没用到的钩子请自行删除
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    beforeCreate() {
    },
    /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
    created() {
        this.selectUserInformation();
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    beforeMount() {

    },
    /**
    * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
    */
    mounted() {
    },
    /**
    * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
    */
    beforeUpdate() {
    },
    /**
    * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
    */
    updated() {
    },
    /**
    * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
    */
    activated() {
    },
    /**
    * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
    */
    deactivated() {
    },
    /**
    * 实例销毁之前调用。在这一步，实例仍然完全可用。
    */
    beforeDestroy() {
    },
    /**
    * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
    * 所有的事件监听器会被移除，所有的子实例也会被销毁。
    */
    destroyed() {
    }
}
</script> 
  
  
<style scoped >
.main {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;

}

.main .main_main {
    height: 80vh;
    width: 80vw;
    display: flex;
}

.main .main_main .main_up {
    width: 40vh;
    height: 45vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.main .main_main .main_up .el_formx_img {
    height: 30vh;
    width: 30vh;
    border-radius: 100%;
    cursor: pointer;
}

.main .main_main .main_down {
    width: 40vh;
    height: 40vh;

}

.upload-demo {
    width: 100%;
}
</style>
  